<template>
  <div>
    <!-- 面包屑导航区域 -->
    <bread-crumb :breadContent="breadContent"></bread-crumb>

    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.key" clearable @clear="getSpecialsList">
          <el-button slot="append" icon="el-icon-search" @click="getSpecialsList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true">添加专业线</el-button>
      </el-col>
    </el-row>
    <br/>

    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="specialList" border stripe :max-height="pageHeight">
        <el-table-column align="center" type="index"></el-table-column>
        <el-table-column align="center" label="专业线名称" prop="name"></el-table-column>
        <el-table-column align="center" label="所属组织" prop="organizationName"></el-table-column>
        <el-table-column width="100px" label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-tooltip effect="dark" content="修改专业线" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editSpecialById(scope.row.id)" ></el-button>
            </el-tooltip> -->
            <el-tooltip effect="dark" content="删除专业线" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeSpecialById(scope.row.id)" ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <pagination  
      v-show="total>0" 
      :total="total" 
      :page.sync="queryInfo.page" 
      :limit.sync="queryInfo.size" 
      @pagination="getSpecialsList"/>
    </el-card>

    <!-- 添加专业线的对话框 -->
    <el-dialog title="添加专业线" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" ref="addFormRef" :rules="addFormRules">
        <el-form-item label="专业线名称" label-width="100px" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属组织" label-width="100px">
          <el-select v-model="addForm.organizationId" clearable placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in organizationList"
              :key="item.organizationId"
              :label="item.organizationName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSpecial">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改专业线的对话框 -->
    <!-- <el-dialog title="修改专业线" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" ref="editFormRef" :rules="addFormRules">
        <el-form-item label="专业线名称" label-width="100px" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属组织" label-width="100px">
          <el-select v-model="editForm.organizationId" clearable placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in organizationList"
              :key="item.organizationId"
              :label="item.organizationName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSpecial">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
  export default {
    data(){
      return{
        breadContent:["超管设置","专业线管理"],
        queryInfo: {
          key: '',
          page: 1,  // 当前的页数
          size: 10  // 当前每页显示多少条数据
        },
        total:0,
        specialList:[],
        addDialogVisible: false,
        // editDialogVisible: false,
        addForm: {
          name:'',
          organizationId:''
        },
        organizationList:[],
        addFormRules: {
          name: [
            { required: true, message: '请填写专业线名称', trigger: 'blur'},
          ],
        },
        // editForm:{
        //   name:'',
        //   organizationId:''
        // }
      }
    },
    created(){
      this.getSpecialsList()
      this.getOrganizationList()
    },
    methods:{
      // 获取专业线列表
      async getSpecialsList(){
        const { data: res } = await this.$http.get('special/page',{params: this.queryInfo})
        if (res.status !== 200) {
          return this.$message.error(res.message)
        }
        console.log(res.data.records)
        this.specialList = res.data.records
        this.total = res.data.total
      },

      // 监听添加专业线对话框的关闭事件
      addDialogClosed () {
        this.$refs.addFormRef.resetFields()
      },

      // 监听修改专业线对话框的关闭事件
      editDialogClosed(){
        this.$refs.editFormRef.resetFields()
      },

      // 获取组织列表
      async getOrganizationList(){
        const {data:res} = await this.$http.get('organization/list/label')
        if(res.status !== 200) return this.$message.error("获取组织列表失败！")
        this.organizationList = res.data
        console.log(this.organizationList)
      },

      // 添加专业线
      addSpecial(){
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('special/add',this.addForm)
          if (res.status !== 201) {
            return this.$message.error(res.message)
          }
          this.$message.success("添加专业线成功！")
          this.addDialogVisible = false
          this.getSpecialsList()
          this.$refs.addFormRef.resetFields()
        })
      },

      // 监听修改对话框的打开事件
      // async editSpecialById(id){
      //   const { data:res } = await this.$http.get('special/'+id)
      //   if(res.status !== 200) return this.$message.error(error)
      //   this.editForm = res.data
      //   console.log(res.data)
      //   this.editDialogVisible = true
      // },
      // 编辑专业线
      // editSpecial(){},

      // 删除专业线
      removeSpecialById(id){
        this.$confirm('此操作将永久删除该专业线, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {data:res} = await this.$http.delete('special/'+id)
          if(res.status !== 200) return this.$message.error('删除失败!')
          this.$message.success('删除成功!');
          this.getSpecialsList()
        }).catch(() => {this.$message.info('已取消删除')});
      }
    }
  }
</script>

<style lang="less" scoped>

</style>